<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>WePY | 小程序组件化开发框架</title>
    <meta name=keywords content="WePY, 小程序, 组件化, ES6, ES7, Promise">
    <meta name="description"
          content="小程序组件化开发框架">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- favicon.ico in the root directory -->
    <link rel="stylesheet" href="./css/main.css">
    <meta property="og:title" content="WePy 小程序组件化开发框架">
</head>
<body class="shown">
<div class="container-wrap" id="app">

    <div class="container">
        <div class="slides">
            <div class="slide slide--one">
                <div class="slide__inner">
                    <div class="header">
                        <div class="header__inner">
                            <a class="logo" href="/">
                                <span class="logo__icon"></span>
                                <div class="logo_text">
                                    <span class="logo__title">WePY</span>
                                    <span class="logo__description"><span> </span>帮你快速开发小程序</span>
                                </div>
                            </a>

                            <div class="nav">
                                <a class="nav__item nav__item--home" href="#/">首页</a>
                                <a class="nav__item nav__item--document" target="_blank" href="./document.html">使用手册</a>
                                <a class="nav__item nav__item--api" target="_blank"
                                   href="./document.html#/api">API 说明</a>
                                <a class="nav__item nav__item--logs" target="_blank" href="./document.html#/changelog">版本日志</a>
                                <!--a class="nav__item nav__item--donate" href="./donate.html">Donate</a-->
                            </div>

                            <div class="shares">
                                <ul class="social-links">
                                    <li class="social-link social-link--wx tooltip tooltip--indis" >
                                        <a href="#" @mouseenter="wxEnter"></a>
                                    </li>
                                    <li class="social-link social-link--gh">
                                        <a href="https://github.com/Tencent/wepy" target="_blank"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tagline">
                        <h2 class="tagline__title">让小程序支持组件化开发的框架</h2>
                        <div class="tagline__body">一个最受欢迎的小程序框架.</div>
                        <div class="tagline__button">
                            <a class="button button--secondary" href="./document.html">从这里开始</a>
                        </div>
                        <div class="tagline__shieds">
                            <div class="tagline__shieds--social">
                                <a><img src="https://img.shields.io/github/forks/Tencent/wepy.svg?style=social&label=Fork"></a>
                                <a><img src="https://img.shields.io/github/stars/Tencent/wepy.svg?style=social&label=Star"></a>
                                <a><img src="https://img.shields.io/github/watchers/Tencent/wepy.svg?style=social&label=Watch"></a>
                            </div>
                            <a href="https://badge.fury.io/js/wepy"><img
                                    data-src="https://camo.githubusercontent.com/fdb99ae00102d3376f9c500a0505411d7037333b/68747470733a2f2f62616467652e667572792e696f2f6a732f776570792e737667"
                                    alt="npm version" src="https://badge.fury.io/js/wepy.svg"
                                    style="max-width:100%;"></a>
                            <a href="https://travis-ci.org/Tencent/wepy?branch=1.7.x"><img
                                    data-src="https://camo.githubusercontent.com/e32bbc2f8619b7408d917253244d0c119af5bdba/68747470733a2f2f7472617669732d63692e6f72672f776570796a732f776570792e7376673f6272616e63683d6d6173746572"
                                    alt="travis-ci" src="https://travis-ci.org/Tencent/wepy.svg?branch=1.7.x"
                                    style="max-width:100%;"></a>
                            <a href="https://coveralls.io/github/Tencent/wepy?branch=1.7.x"><img
                                    data-src="https://camo.githubusercontent.com/b9c60c722e692ddf5e85dd91cbbcc841633bed9f/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f776570796a732f776570792f62616467652e7376673f6272616e63683d6d6173746572"
                                    alt="Coverage Status"
                                    src="https://coveralls.io/repos/github/Tencent/wepy/badge.svg?branch=1.7.x"
                                    style="max-width:100%;"></a>
                            <a href="https://david-dm.org/Tencent/wepy"><img
                                    data-src="https://camo.githubusercontent.com/d3197e1930cec8f270b89fcff34d093d918b33b0/68747470733a2f2f64617669642d646d2e6f72672f776570796a732f776570792e737667"
                                    alt="Dependency Status" src="https://david-dm.org/Tencent/wepy.svg"
                                    style="max-width:100%;"></a>
                        </div>
                        <div class="tagline__footer">
                            <div class="tagline__footer-inner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slide slide--features">
                <div class="slide__inner">
                    <div class="section section--enter">
                        <h2 class="title">为什么要选择WePY？</h2>
                        <div class="text">
                            <p>
                                目前已有超过 5000 位开发者使用或了解本框架, 拥有众多的开发特性和优化方案.
                            </p>
                        </div>

                        <div class="features">
                            <div class="feature-item">
                                <span class="features__icon features-icon--style"></span>
                                <div class="features-text">
                                    <h2 class="features__title">开发风格</h2>
                                    <p class="features__description">接近于 Vue.js，支持组件 Props
                                        传值，自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等等</p>
                                </div>
                            </div>

                            <div class="feature-item">
                                <span class="features__icon features-icon--component"></span>
                                <div class="features-text">
                                    <h2 class="features__title">组件化</h2>
                                    <p class="features__description">组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题</p>
                                </div>
                            </div>

                            <div class="feature-item">
                                <span class="features__icon features-icon--npm"></span>
                                <div class="features-text">
                                    <h2 class="features__title">NPM</h2>
                                    <p class="features__description">支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包</p>
                                </div>
                            </div>
                            <div class="feature-item">
                                <span class="features__icon features-icon--promise"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">Promise</h2>
                                    <p class="features__description">通过 polyfill 让小程序完美支持 Promise，解决回调烦恼</p>
                                </div>
                            </div>
                            <div class="feature-item">
                                <span class="features__icon features-icon--es"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">ES2015</h2>
                                    <p class="features__description">可使用 Generator Fu-nction / Class / Async Function 等特性，大大提升开发效率</p>
                                </div>
                            </div>
                            <div class="feature-item">
                                <span class="features__icon features-icon--optimize"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">优化</h2>
                                    <p class="features__description">对小程序本身的优化，如请求列对处理，优雅的事件处理，生命周期的补充，性能的优化等等</p>
                                </div>
                            </div>
                            <div class="feature-item">
                                <span class="features__icon features-icon--compile"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">编译器</h2>
                                    <p class="features__description">支持样式编译器：Less/Sass/Styus，模板编译器：wx-ml/Pug，代码编译器：Babel/Typescript。
                                    </p>
                                </div>
                            </div>
                            <div class="feature-item">
                                <span class="features__icon features-icon--plugin"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">插件</h2>
                                    <p class="features__description">支持多种插件处理，如文件压缩，图片压缩，内容替换等，扩展简单,使用方便
                                    </p>
                                </div>
                            </div>

                            <div class="feature-item">
                                <span class="features__icon features-icon--size"></span>
                                <div class="features-text">
                                    <h2 class="feature__title">框架大小</h2>
                                    <p class="features__description">
                                        压缩后 24.3KB 即可拥有所有框架功能，额外增加 8.9
                                        KB后即可使用 Promise 和 Async Function
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide slide--gist">
                <div class="slide__inner">
                    <div class="slide__header">
                        <h2 class="slide__title">主要功能特性</h2>
                        <p class="slide__description">
                            WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。以下是使用 WePY 前后的代码对比与组件化示例。</p>
                    </div>
                    <div class="slide__body">
                        <article class="gallery ">
                            <figure class="gist window" :style="item.style" v-for="(item, index) in gists" :key="index" @mouseenter="codeEnter(item)" @mouseleave="codeLeave(item)">
                                <figcaption><span class="chrome btn close"></span><span
                                        class="chrome btn minimize"></span><span
                                        class="chrome btn fullscreen"></span><span
                                        class="chrome title">{{item.title}}</span></figcaption>
                                <pre class="language-js" data-start="100"><code>
                                    {{item.code}}
                                </code></pre>
                            </figure>
                        </article>

                    </div>
                </div>
            </div>
            <div class="slide slide--examples slide--shown">
                <div class="slide__inner">
                    <div class="slide__header">
                        <h2 class="slide__title">应用案例</h2>
                        <p class="slide__description">
                            <span v-for="item in textCases" style="display: none" v-show="textCases.length">
                                <a class="cases" :href="item.link ? item.link : 'javascript:;'" :class="{'islink': item.link}">{{item.name}}</a>
                                <a class="opensource cases islink" :href="item.opensource ? item.opensource : 'javascript:;'" v-show="item.opensource">（开源）</a>、
                            </span>
                            ...
                        </p>
                        <div class="examples__pr">
                            <a class="button button--pr" href="https://github.com/Tencent/wepy/tree/master/docs/data" target="_blank"> 
                                <strong style="font-size: 20px;">+</strong> 案例</a>
                        </div> 
                    </div>

                    <!-- 应用案例 -->
                    <div class="examples carousel">
                        <a href="" target="_blank" class="example carousel-cell" v-for="item in rollCases" style="display: none" v-show="rollCases.length">
                            <div class="example__inner">
                                <h3 class="example__title" v-text="item.name"></h3>
                                <div class="example__image" :style="{ backgroundImage: 'url(\'' + item.qrcode + '\')'}" ></div>
                            </div>
                        </a>
                    </div>
                    <div class="slide__footer"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-container" :class="isQrShow ? 'active' : ''" @click="modalClick"> 
            <div class="qr-modal">
                <div style="padding: 10px;">
                    我们是完全开源的，任何人都可以免费投稿。WePY 交流群已满500人，请加 gcaufy_helper 好友或者扫码加好友，验证回复 wepy 按照指引进群。
                </div> 
                <img style="width: 200px;" src="img/qrcode.png">
            </div>
    </div>
</div>

<div class="footer">
    <div class="footer-inner">
        <div class="footer--copyright">
            Copyright © 2017 THL A29 Limited a Tencent company All rights reserved
        </div>
    </div>
</div>
<script src="js/flickity.pkgd.min.js"></script>
<script src="js/prism.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

  var toNumber = function (str) {
    str = encodeURIComponent(str).replace(/%/ig, '').substring(0, 8);
    var hex = '';
    for (var i in str) {
      var char = str[i].toUpperCase().charCodeAt(0);
      if ((char >= 65 && char <= 70) || (char >= 48 && char <= 57)) {
        hex += '' + str[i];
      } else {
        hex += '' + char;
      }
    }
    return parseInt(hex.substring(0, 8), 16);
  }
  var calcWeight = function (item) {
    var weight = 0;

    (item.email) && (weight += 10);
    (item.company) && (weight += 20);
    (item.link) && (weight += 50);
    (item.qrcode) && (weight += 100);
    (item.opensource) && (weight += 500);

    (item.company === 'Tencent') && (weight += 1000);
    var nameWeight = '0.' + toNumber(item.name);
    return (+nameWeight + weight);
  };

  var app = new Vue({
    el: '#app',
    data: {
      textCases: [],
      rollCases: [],
      isQrShow: false,
      gists: [{
        id: 1,
        title: '原生代码 index.js',
        lang: 'language-js',
        style: '',
        code: `
import wepy from 'wepy';
        
export default class Index extends wepy.page {
    getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({data: 123});
        }, 3000);
      });
    };
        
    async onLoad () {
      let data = await this.getData();
      console.log(data.data);
    };
}`
    }, {
        id: 2,
        title: `index.wpy 中的 <script> 部分`,
        lang: 'language-js',
        style: '',
        code: `
import wepy from 'wepy';
        
// 通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
    //可用于页面模板绑定的数据
    data = {
      motto: 'Hello World',
      userInfo: {}
    };
     
    //事件处理函数(集中保存在methods对象中)
    methods = {
      bindViewTap () {
        console.log('button clicked');
      }
    };
        
    //页面的生命周期函数
    onLoad () {
      console.log('onLoad');
    };
}`
    }, {
        id: 3,
        title: `支持ES6/7的一些新特性`,
        lang: 'language-js',
        style: '',
        code: `
import wepy from 'wepy';
        
export default class Index extends wepy.page {
    getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({data: 123});
        }, 3000);
      });
    };
        
    async onLoad () {
      let data = await this.getData();
      console.log(data.data);
    };
}`
    }]
    },
    created: function () {
      var self = this;
      axios.get('./data/cases.json').then(function (res) {
        if (res && res.data) {
          let cases = res.data.cases;
          cases = cases.sort(function (a, b) {
            return calcWeight(b) - calcWeight(a);
          });
          self.rollCases = cases.filter(function (v) {
            return !!v.qrcode;
          });
          self.textCases = cases;
          Vue.nextTick(function () {
            var flkty = new Flickity( '.carousel', {
              initialIndex: 0,
              cellAlign: 'left',
              autoPlay: true,
              pauseAutoPlayOnHover: true,
              autoPlay: 1500,
              pageDots: false,
              wrapAround: true
            });
          });
        }
      });
    },
    methods: {
        wxEnter: function () {
            this.isQrShow = true
        },
        modalClick: function () {
            this.isQrShow = false
        },
        codeEnter: function (item, $evt) {
            switch (item.id) {
                case 1: {
                  item.style = 'z-index: 3; transform: scale(1) translate(-95%, 0%); transform-origin: 0% 0%; font-weight: 500;'
                  break;
                }
                case 3: {
                  item.style = 'z-index: 3; transform: scale(1) translate(120%, 0%); transform-origin: 100% 0%; font-weight: 500;'
                  break;
                }
            }
        },
        codeLeave: function (item) {
          item.style = 'z-index: -1;'
        }
    }
  });

</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?14c98a4c2ac48bfa7a4c6e9bf797d125";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
